<template>
<div style="background-color: white;height: 445px;width: 1000px;margin-bottom: 20px;">
  <div style="font-size: 18px;font-weight: bold;height: 50px;line-height: 50px;margin: 0 20px;border-bottom: #e9e9eb">精选推荐</div>

  <div style="height: 350px;padding: 15px 0;margin: 0 40px;overflow: hidden">
    <el-row :gutter="40">
     <el-col :span="6" v-for="a in recommend">
       <div style="margin: 0 26px;margin-bottom: 100px;">
        <div>
          <img  class="chick" :src="a.coverUrl" alt="" style="height: 225px;width: 170px" @click="router.push('detail?id='+a.id)">
        </div>
         <div  class="chick" style="margin-top: 10px;font-size: 18px">{{ a.title }}</div>
         <div  class="chick" style="margin-top: 5px;font-size: 15px;color: #8493a5">{{ a.author }}</div>
         <div  class="chick" style="margin-top: 5px;font-size: 15px;color: #8493a5">￥{{ a.salePrice }}</div>
       </div>
     </el-col>
    </el-row>
  </div>
</div>
  <div>
    <el-menu default-active="0" class="el-menu-demo" mode="horizontal" @select="handleMenuSelect">
      <el-menu-item index="0">全部</el-menu-item>
      <el-menu-item :index="a.id" v-for="a in sort">{{a.name}}</el-menu-item>
    </el-menu>
  </div>
  <div style="background-color: white;width: 1000px;">
    <div style="padding: 20px 0;margin: 0 40px;padding: 0;padding-top: 30px">
      <el-row :gutter="40">
        <el-col :span="6" v-for="a in data" @click="router.push('detail?id='+a.id)">
          <div style="height: 365px;margin: 0 7%">
            <div>
              <img  class="chick" :src="a.coverUrl" alt="" style="height: 225px;width: 170px">

            </div>
            <div class="chick" style="margin-top: 10px;font-size: 18px">{{ a.title }}</div>
            <div class="chick" style="margin-top: 5px;font-size: 15px;color: #8493a5">{{ a.author }}</div>
            <div class="chick" style="margin-top: 5px;font-size: 15px;color: #8493a5">￥{{ a.salePrice }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import router from "@/router";
import axios from "axios";
import qs from "qs";

const recommend=ref([
  {
    coverUrl:"https://picx.zhimg.com/v2-c70fa52c486461e7d62f8c1f30269932_200x0.jpg?source=f11ebe26",
    title:"危险的维纳斯",
    author:"东野圭吾",
    salePrice:"22.50",
  },
  {
    coverUrl:"https://picx.zhimg.com/v2-a6d65e05ec8db74369f3a7c0073a227a_200x0.jpg?source=f11ebe26",
    title:"切尔诺贝利的祭祷",
    author:"S·A·阿列克谢耶维奇",
    salePrice:"25.00",
  },
  {
    coverUrl:"https://picx.zhimg.com/v2-51c4a4107737b0ca31be0dddf03f6118_200x0.jpg?source=f11ebe26",
    title:"史蒂夫·乔布斯传（修订版）",
    author:"沃尔特·艾萨克森",
    salePrice:"40.50",
  },
  {
    coverUrl:"https://pica.zhimg.com/v2-962aee0d086c53f5eb19e36035623c88_200x0.jpg?source=f11ebe26",
    title:"超有料漫画中国史",
    author:"韩明辉",
    salePrice:"17.99",
  }
])
const data=ref([
  {
    id:1,
    coverUrl:"https://picx.zhimg.com/v2-a13534c3bf5d42043ab313f264a8859f_200x0.jpg?source=f11ebe26",
    title:"自学日语：从五十音到 N2",
    author:"张怀民",
    salePrice:"9.99",
  },
  {
    id:2,
    coverUrl:"https://pic1.zhimg.com/v2-8d7b81a1b4b286a08177a78a2d796fe6_200x0.jpg?source=f11ebe26",
    title:"为什么你的爱情总是不尽人意？",
    author:"简单心理",
    salePrice:"9.99",
  },
  {
    id:3,
    coverUrl:"https://picx.zhimg.com/v2-c802e4acfb73a6f2e63cdffd56ac69c4_200x0.jpg?source=f11ebe26",
    title:"在哥伦比亚丛林中：我与游击队员的一周",
    author:"刘骁骞",
    salePrice:"9.99",
  },
  {
    id:4,
    coverUrl:"https://picx.zhimg.com/v2-a58c2497683089001b3b6dfa67cfec8c_200x0.jpg?source=f11ebe26",
    title:"我们为什么上班？",
    author:"张佳玮 等",
    salePrice:"17.99",
  },
  // {
  //   imgUrl:"https://picx.zhimg.com/v2-01ce40b991b77e7f31b119fa4cadac7c_200x0.jpg?source=f11ebe26",
  //   bookName:"美国陷阱",
  //   author:"弗雷德里克· 皮耶鲁齐 等",
  //   price:"9.99",
  // },
  // {
  //   imgUrl:"https://picx.zhimg.com/v2-70837d1084fcfc285b3cac305390d0f1_200x0.jpg?source=f11ebe26",
  //   bookName:"阿拉伯帝国的落日",
  //   author:"男爵兔",
  //   price:"9.99",
  // },
  // {
  //   imgUrl:"https://picx.zhimg.com/v2-ad11548cf24eb4248b7ffd807f4a2f01_200x0.jpg?source=f11ebe26",
  //   bookName:"读书会特刊 | 找对方法好学习",
  //   author:"知乎盐选创作者 等",
  //   price:"9.99",
  // },
  // {
  //   imgUrl:"https://pica.zhimg.com/v2-fff99692276af043c9c21a404dbfab4e_200x0.jpg?source=f11ebe26",
  //   bookName:"互联网洞见者",
  //   author:"ponyma 等",
  //   price:"17.99",
  // },
])

const sort=ref([
  {
    id:"1",
    name:"人文社科",
  },
  {
    id:"2",
    name:"职场成长",
  },
  {
    id:"3",
    name:"生活方法",
  },
  {
    id:"4",
    name:"技能学得",
  },
  {
    id:"5",
    name:"科技科普",
  },
  ]);

const sortUrl=ref('http://localhost:20800/kcircle/category/findCategory')
const goodsUrl=ref('http://localhost:20800/kcircle/goods/findGoodsByCategoryId')
const recommendUrl=ref('http://localhost:20800/kcircle/goods/findGoodsRecommend');

onMounted(()=>{
  let jwt="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJyb290IiwicmVtb3RlQWRkciI6IjA6MDowOjA6MDowOjA6MSIsInVzZXJBZ2VudCI6Ik1vemlsbGEvNS4wIChXaW5kb3dzIE5UIDEwLjA7IFdpbjY0OyB4NjQpIEFwcGxlV2ViS2l0LzUzNy4zNiAoS0hUTUwsIGxpa2UgR2Vja28pIENocm9tZS8xMDkuMC4wLjAgU2FmYXJpLzUzNy4zNiBTTEJyb3dzZXIvOS4wLjAuMTAxOTEgU0xCQ2hhbi8yNSJ9.jixSxMapdjJuYgKjnpBb4T95kY1r8NXXxF09CLoP50c";
  let loginInfo=JSON.stringify({token:jwt})
  localStorage.setItem('loginInfo',loginInfo)
  // alert(localStorage.getItem('loginInfo'))

  window.TokenAxios.get(recommendUrl.value).then((response)=>{
    // console.log(response.data.data);
    if (response.data.data!=null){
      recommend.value=response.data.data;
    }
  }).catch(()=>{
    console.log("获取后端推荐列表数据失败")
  })

  window.TokenAxios.get(sortUrl.value).then((response)=>{
    // console.log(response.data.data);
    if (response.data.data!=null){
      sort.value=response.data.data;
    }
  }).catch(()=>{
    console.log("获取后端类别数据失败")
  })

  loadGoods(0)

})

const loadGoods=(param)=>{
  window.TokenAxios.get(goodsUrl.value+'?id='+param).then((response)=>{
    if (response.data.data!=null){
      data.value=response.data.data;
      // console.log(response.data.data);
    }
  }).catch(()=>{
    console.log("获取后端商品数据失败")
  })
}

const handleMenuSelect=(index)=>{
  console.log("你选中的类别id："+index);
  loadGoods(index);
}
</script>

<style scoped>
.chick:hover{
  cursor: pointer;
}
</style>